import React, {useState, useEffect, Fragment, useRef} from 'react'
import {NavigationStackScreenComponent} from 'react-navigation-stack'
import {
  View,
  Text,
  Image,
  ScrollView,
  TouchableOpacity,
  ViewStyle,
  ImageStyle,
  TextStyle,
  TextInput,
} from 'react-native'
import {RadiusButton, InfoLayout} from 'components'
import assets from 'modules/assets'
import {translateSize, commonStyle, themeColors, definedColors} from 'styles'
import pos, {PosAppCustomer, PosCustomer, PosAppBank} from 'api/pos'
import {getAuthorization, operate} from 'services/authorization'
import Loading from 'components/loading'
import {PosAppZskOption} from '../../api/pos'
import ModalDropdown from 'react-native-modal-dropdown'
import {inputIdentityStyle} from './style'

const ChooseCustomerScreen: NavigationStackScreenComponent<{data: PosCustomer}> = props => {
  const dropdownRef = useRef<ModalDropdown>()
  const [customerData, setCustomerData] = useState<PosAppCustomer>([])
  const [currentCustomer, setCurrentCustomer] = useState<PosAppCustomer>({})
  const [bankList, setBankList] = useState<PosAppBank[]>([])
  const [noData, setNoData] = useState(false)
  const [fundName, setFundName] = useState('暂收款')
  const [zskOptionList, setZskOptionList] = useState<PosAppZskOption[]>([])

  useEffect(() => {
    Loading.show()
    pos.posApp
      .getZskFee({
        ...props.navigation.getParam('data'),
        ...{
          scene: 'szsk',
          projectId: getAuthorization().project.id,
        },
      })
      .then(res => {
        if (res.customerList && res.customerList.length == 1) {
        }
        setCustomerData(res.customerList || [])
        if (!res.customerList || res.customerList.length < 1) {
          setNoData(true)
        }
        if (res.customer) {
          setCurrentCustomer(res.customer)
        } else {
          setCurrentCustomer(
            res.customerList && res.customerList.length > 0 ? res.customerList[0] : {},
          )
        }

        setBankList(res.bankList || [])
        setFundName(res.fundName || '暂收款')
        setZskOptionList(res.zskOptionList || [])
      })
      .finally(() => {
        Loading.hide()
      })
  }, [])

  const renderItem = (item: PosAppCustomer) => {
    return (
      <View style={itemContainer} key={item.erpId}>
        <Image style={itemIcon} source={assets.images.icon_customer_male} />
        <View style={itemContent}>
          <InfoLayout
            title="客户姓名："
            titlePartner={<Text style={itemNameFont}>{item.name}</Text>}
            hideDivier={true}
            style={itemLayout}
          />
          <InfoLayout
            title="身份证号："
            titlePartner={<Text style={itemTellFont}>{item.zjNumber}</Text>}
            hideDivier={true}
            style={itemLayout}
          />
          <InfoLayout
            title="电话号码："
            titlePartner={<Text style={itemTellFont}>{item.tel}</Text>}
            hideDivier={true}
            style={itemLayout}
          />
        </View>
        <TouchableOpacity
          style={itemCheckContainer}
          onPress={() => {
            operate()
            setCurrentCustomer(item)
          }}>
          <Image
            resizeMode="cover"
            style={itemCheckImage}
            source={
              item.erpId == currentCustomer.erpId
                ? assets.images.icon_check
                : assets.images.icon_uncheck
            }
          />
        </TouchableOpacity>
      </View>
    )
  }

  return (
    <View style={[commonStyle.containerColumn, container]}>
      {/*<TouchableOpacity*/}
      {/*activeOpacity={0.8}*/}
      {/*onPress={() => {*/}
      {/*dropdownRef.current.show()*/}
      {/*}}>*/}
      {/*<TextInput*/}
      {/*style={{*/}
      {/*backgroundColor: '#fff',*/}
      {/*borderRadius: translateSize(8),*/}
      {/*marginBottom: translateSize(20),*/}
      {/*paddingHorizontal: translateSize(24),*/}
      {/*}}*/}
      {/*keyboardType={'default'}*/}
      {/*placeholder={'请选择查询方式'}*/}
      {/*/>*/}
      {/*</TouchableOpacity>*/}
      <ModalDropdown
        ref={ref => {
          dropdownRef.current = ref
        }}
        dropdownStyle={{width: '90%'}}
        dropdownTextStyle={{fontSize: translateSize(32)}}
        options={['电话号码', '身份证号码']}
        onSelect={(index: string, option: string) => {
          // setInputType(option == '电话号码' ? 'telphone' : 'idcard')
        }}>
        <TouchableOpacity
          style={[commonStyle.containerRow, inputIdentityStyle.typeContainer]}
          onPress={() => {
            operate()
            dropdownRef.current.show()
          }}>
          <TextInput
            style={{
              backgroundColor: '#fff',
              borderRadius: translateSize(8),
              marginBottom: translateSize(20),
              paddingHorizontal: translateSize(24),
            }}
            keyboardType={'default'}
            placeholder={'请选择查询方式'}
          />
          {/*<Text style={inputIdentityStyle.typeContent}>*/}
          {/*{inputType == 'idcard' ? '身份证' : '电话号码'}*/}
          {/*</Text>*/}
          {/*<Image style={inputIdentityStyle.typeIcon} source={assets.images.icon_arrow_right} />*/}
        </TouchableOpacity>
      </ModalDropdown>
      <TextInput
        style={{
          backgroundColor: '#fff',
          borderRadius: translateSize(8),
          paddingHorizontal: translateSize(24),
        }}
        keyboardType={'default'}
        placeholder={'请输入'}
      />
      {noData ? (
        <Text style={commonStyle.noDataWarn}>未找到客户，请确认用户信息是否正确！</Text>
      ) : (
        <Fragment>
          <ScrollView>
            <View>{customerData.map(renderItem)}</View>
          </ScrollView>
          <RadiusButton
            style={{
              height: translateSize(96),
            }}
            onPress={() => {
              props.navigation.navigate('AdvanceFund', {
                customerInfo: currentCustomer,
                bankList,
                fundName,
                zskOptionList,
              })
            }}>
            <Text style={{fontSize: translateSize(28), color: definedColors.white}}>查询</Text>
          </RadiusButton>
        </Fragment>
      )}
    </View>
  )
}

ChooseCustomerScreen.navigationOptions = props => {
  return {
    title: '个人身份',
    headerStyle: {
      margin: translateSize(0),
      elevation: 0,
      borderBottomWidth: 1,
      borderBottomColor: '#212447',
      backgroundColor: '#212447',
    },
  }
}

const container: ViewStyle = {
  backgroundColor: themeColors.pageBg,
  padding: translateSize(32),
  height: '100%',
}

const itemContainer: ViewStyle = {
  width: '100%',
  height: translateSize(215),
  paddingLeft: translateSize(62),
  paddingVertical: translateSize(42),
  paddingRight: translateSize(30),
  flexDirection: 'row',
  alignItems: 'center',
  position: 'relative',
  backgroundColor: definedColors.white,
  borderRadius: translateSize(10),
  marginBottom: translateSize(32),
}

const itemIcon: ImageStyle = {
  width: translateSize(80),
  height: translateSize(80),
}

const itemContent: ImageStyle = {
  flexDirection: 'column',
  justifyContent: 'space-between',
  width: '100%',
  height: '100%',
}

const itemLayout: ViewStyle = {
  paddingTop: translateSize(0),
  paddingBottom: translateSize(0),
  paddingLeft: translateSize(55),
}

const itemTellFont: TextStyle = {
  fontSize: translateSize(24),
  color: definedColors.grayContent,
}

const itemNameFont: TextStyle = {
  fontSize: translateSize(28),
  color: definedColors.gray33,
}

const itemCheckContainer: ViewStyle = {
  position: 'absolute',
  right: 0,
  top: 0,
  padding: translateSize(28),
}

const itemCheckImage: ImageStyle = {
  width: translateSize(50),
  height: translateSize(50),
}

export default ChooseCustomerScreen
